<template name="shareOrder">
	<view :style="$s.view_color">
		<view class="shareimg">
			<u-icon
				name="share"
				size="20"
				label="分享"
				labelPos="bottom"
				labelSize="22rpx"
				:labelColor="$s.fontcolor"
				:color="$s.fontcolor"
				@click="showpop"
			></u-icon>
		</view>
		<u-popup :show="show" @close="show=false" :closeable="true" mode="center" :round="10">
			<view class="share-box">
				<view class="share-icon">
					<u-icon name="checkmark-circle-fill" color="#00cf97" size="80"></u-icon>
				</view>
				<view class="share-text">
					您的租车信息已经生成，分享给好友后可以生成相同的租车订单
				</view>
				<view class="share-but">
					<button class="my-but-primary" open-type="share">分享</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'shareOrder',
		props: {
		},
		data() {
			return {
				id:0,
				show:false,	
			};
		},
		watch: {
		},
		computed: {
			...mapState({
				gain_info:state => state.$gainInfo,
				back_info:state => state.$backInfo,
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				carid:state => state.$carID,
			}),
		},
		//首次运行加载
		mounted(){
			
		},
		methods: {
			showpop(){
				let post={
					start_date:this.start_date.timestamp,
					end_date:this.end_date.timestamp,
					gain_type:this.gain_info.type,
					gain_address:this.gain_info.address,
					gain_lat:this.gain_info.lat,
					gain_lng:this.gain_info.lng,
					gain_store:this.gain_info.store,
					back_type:this.back_info.type,
					back_address:this.back_info.address,
					back_lat:this.back_info.lat,
					back_lng:this.back_info.lng,
					back_store:this.back_info.store,
					car_id:this.carid
				}
				this.$u.api.orderShareID(post).then(res=>{
					this.show=true;
					this.$emit('shareInfo',res.data);
				})
			}
		}
	};
</script>

<style lang="scss">
	.shareimg{
		position: absolute;
		right: 0rpx;
		// #ifdef MP-WEIXIN || H5
		top: 80rpx;
		// #endif
		// #ifdef MP-ALIPAY
		top: 280rpx;
		// #endif
		left: auto;
		padding: 16rpx 10rpx 16rpx 20rpx;
		background-color: var(--view-theme);
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}
	.share-box{
		width: 600rpx;
		padding: 30rpx;
		padding-top: 80rpx;
	}
	.share-icon,.share-text,.share-but{
		margin-bottom: 30rpx;
	}
	.share-icon{
		text-align: center;
		margin-right:auto;
		margin-left: auto;
		width: 160rpx;
	}
	.share-text{
		font-size: 28rpx;
	}
	.share-but{
		
	}
</style>
